<template>
  <div class="article " id="detail_article" :class="{'scroll': scrollClass, 'begin': scrollClass2, 'topH': !isPhone && (discount.length > 0 || isDetailProductExit)}">
    <div class="el-image " :style="'background-image:url('+utils.setCdnUrl()+detail.image_head+')'"></div>
    <div class="extendData" v-show="(!isPhone && (discount.length > 0 || isDetailProductExit)) || isPhone">
      <div  class="article_detail">  
        <p :class="{'active': curIs === 1}" v-show="isPhone" @click="scrollToModule(1, 'youLike')" >You May Like</p>
        <p :class="{'active': curIs === 2}" v-show="discount.length > 0"  @click="scrollToModule(2, 'promotion')" >Promotion</p>
        <p :class="{'active': curIs === 3}" v-show="isDetailProductExit" @click="scrollToModule(3, 'recommendation_article')" >Promotion</p> 

      </div>
    </div>
    <div class="detail_comment">
      <div class="detail_comment_right" v-class2="'visible'">
        <div class="detail_title">
          <p class="title">{{detail.title}}</p>
          <div class="label_time_num">
            <p class="label"> 
              <a class="first_type">{{detail.first_type}}</a>
              
               <span v-for="item in detail.label" :key="item" @click="goToList(item)">{{item}}</span>
            </p>
            <div class="time_num">
              <p class="time">{{detail.create_time}}</p>
          
              <p class="num">
                <i class="iconfont icon-View_normal2"></i>
                <span>{{detail.view_num}}  </span>
              </p>
            
            </div>
          </div>
        
        </div>
        <div class="detail_content" v-html="detail.article_editor"></div>
   
        <div class="detail_discount" v-if="discount && !isPhone" id="promotion">
          <div class="detail_discount_title">
            <p class="title" v-if="discount.length > 0 && discount[0].discount_title">{{discount[0].discount_title}}</p>
            <p class="secTitle" v-if="discount.length > 0 && discount[0].discount_description">{{discount[0].discount_description}}</p>
          </div>

          <div class="detail_discount_content" v-if="discount && !isPhone">
            <div class="detail_discount_item" v-for="item in discount" :key="item.attributes" @click="goToProductDetails(item)">
              <div class="detail_discount_item_image" >
                <p :style="'background-image:url('+item.httpImage+')'"></p>
          
              </div>
              <div class="bottom">
                <p>{{item.product_title}}</p>
                <div class="money">
                  <p>
                    <span class="red">{{currency(item.site, item.discount_price)}}</span>
                    <span class="grey">{{currency(item.site, item.original_price)}}</span>
                  </p>
                  <p>
                    <span class="discount">{{item.site}}({{item.discount}}% off)</span>
                  </p>
                </div>
                <div class="time">
                  <el-tooltip  class="item" effect="dark" content="Copy Link to Clipboard" placement="top-start">
                    <p class="blue" @click.stop="copyPromotionCode(item.promotion_code)">{{item.promotion_code}}</p>
                  </el-tooltip>
                  <p class="date">{{item.timeFormat}}</p>
                </div>
              </div>
            
            </div>
          </div>  
        </div>
        <div id="recommendation_article" v-if="detail.products && !isPhone">
          <div  class="productContent">
            <ProductItem :list="detail.products"></ProductItem>
          </div>
        </div>
      </div>

      <div class="detail_comment_left" v-class2="'visible'">

        <div class="you_like_cont" id="youLike" v-show="list_youLike.length > 0">
          <p class="you_like_title">You May Also Like</p>
          <div class="youLike_content">
            <div class="you_like_item" v-for="item in list_youLike" :key="item.image" @click="goToDetails(item)">
              <div class="you_like_item_image" >
                <p :style="'background-image:url('+utils.setCdnUrl() + item.image+')'"></p>
              </div>
              <div>
                <p>{{item.title}}</p>
                <span>{{item.first_type}}</span>
              </div>
            </div>
          </div>
          <swiper class="youLike_swiper" :options="swiper_recommendationData" ref="mySwiper" >
            <swiper-slide class="you_like_item" v-for="item in list_youLike" :key="item.image" @click="goToDetails(item)">
              <el-image :src="utils.setCdnUrl()+item.image"></el-image>
              <div>
                <p>{{item.title}}</p>
                <span>{{item.first_type}}</span>
              </div>
            </swiper-slide>
            </swiper>
        </div>
      </div>
    </div>


   <div class="detail_discount " v-class2="'visible'" v-if="discount.length > 0 &&  isPhone" id="promotion">
      <div class="detail_discount_title">
        <p class="title" v-if="discount.length > 0 && discount[0].discount_title">{{discount[0].discount_title}}</p>
        <p class="secTitle" v-if="discount.length > 0 && discount[0].discount_description">{{discount[0].discount_description}}</p>
      </div>
      <!-- 手机端 -->
      <swiper :options="swiper_discount_product" ref="moduleDiscount" class="discount_swiper"> 
        <swiper-slide class="detail_discount_item" v-for="item in discount" :key="item.attributes" @click="goToProductDetails(item)">
          <div class="detail_discount_item_image" >
            <p :style="'background-image:url('+utils.setCdnUrl()+item.image+')'"></p>
          </div>
          <div class="bottom">
            <p>{{item.product_title}}</p>
            <div class="money">
              <p>
                <span class="red">{{currency(item.site, item.discount_price)}}</span>
                <span class="grey">{{currency(item.site, item.original_price)}}</span>
              </p>
              <p>
                <span class="discount">{{item.site}}({{item.discount}}% off)</span>
              </p>
            </div>
            <div class="time">
              <el-tooltip  class="item" effect="dark" content="Copy Link to Clipboard" placement="top-start">
                <p class="blue" @click.stop="copyPromotionCode(item.promotion_code)">{{item.promotion_code}}</p>
              </el-tooltip>
              <p class="date">{{item.timeFormat}}</p>
            </div>
          </div>
        </swiper-slide>
  
      </swiper>
      <div class="swiper_discount_btn">
        <div class="swiper_discount_pagination" slot="pagination" ></div>
        <i class="iconfont icon-Stop" v-show="isDiscountSwiperRun" @click="stopSwiperStopAutoplay('moduleDiscount')"></i>
        <i class="iconfont icon-Play" v-show="!isDiscountSwiperRun" @click="startSwiperStopAutoplay('moduleDiscount')"></i>
      </div>   
    </div>
    <div id="recommendation_article" v-class2="'visible'" class="phoneshow" v-if="isDetailProductExit && isPhone">
      <swiper :options="swiper_recommendationData" ref="mySwiper" >
        <swiper-slide class="productItem" v-for="(item, index) in detail.products" :key="index" @click="goToDetail(item)">
          <el-image :src="item.curSpec.httpImage" v-if="item.curSpec && item.curSpec.httpImage"></el-image> 
          <p class="title">{{item.title}}</p>
          <div class="colorList " v-if="item.color.length > 0" >
            <p  class="color" v-for="(spec, specItem) in item.color" :key="specItem"   
            :class="{'color_active': spec == item.curSpec.color, 'color_disabled': !colorToSize(item,spec)}" 
            :style="'background-color:' + spec" @click.stop="changeColor(item, spec)">
              <img :src="shadowImg" :lazy="true" class="svgHover icon-shade" v-show="!colorToSize(item,spec)">
            </p>
            <p class="clearBoth"></p>
            </div>
          <div class="specList"  v-if="item.specification.length > 0">
            <p class="spec" :class="{'spec_active': spec == item.curSpec.specification_name, 'diabled' : !sizeToColor(item, spec) }" 
            v-for="(spec, specItem) in item.specification" :key="specItem"  @click.stop="changeSpec(item, spec)">{{spec}} </p>
            <p class="clearBoth"></p>
            </div>
          <div class="comment"><el-rate v-model="item.star_comment" disabled show-score :score-template="item.all_comment_num +' reviews'" :colors="rateArray"></el-rate></div>

          <p class="tag" v-if="item.tag_type">{{item.tag_type}}</p>
        </swiper-slide>
      </swiper>
    </div>
   
    <div class="shareModule">
      <a @click="isShareDialogShow()">
        <svg class="svgNormal" >
          <use xlink:href="#icon-Share_actived"></use>
        </svg>
        <svg class="svgHover" >
          <use xlink:href="#icon-Share_actived"></use>
        </svg>
      </a>
      <a class="icon-Top">
        <svg class="svgNormal" >
          <use xlink:href="#icon-Top1_normal"></use>
        </svg>
        <svg class="svgHover" >
          <use xlink:href="#icon-Top1_hover"></use>
        </svg>
      </a>

    </div>

   
    <!-- <Login v-show="loginShow" :show="loginShow" @closeDialog="closeLoginDialog"></Login> -->
    <!-- <Share v-show="shareShow" :show="shareShow" @closeDialog="closeShareDialog"></Share> -->
    <SharePc  :product="shareData" :isArticle="true"></SharePc>
    <ShareDialog v-show="isShare" :isArticle="true" :show="isShare" @closeDialog="isShareDialogShow" :product="shareData"></ShareDialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { detail, youLike, discount, article_comment, comment_list, comment_reply, comment_reply_list, give_like } from '@/api/explore/article.js'
import { timeFormat, parseMoney} from '@/utils/index.js'
// import Login from './login'
// import Share from './share'
import { articleDiscountClickFunc } from '@/utils/kanban.js'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import ProductItem from '@/components/productItem'
import { SharePc , ShareDialog} from '@/components/shareFunc'
export default {
  data() {
    return {
      curIs: 1,
      detail: {
        view_num: 0,
        comment_num: 0,
        thumb_up_num: 0
      },
      list_youLike: [],
      discount: [],
      commentWord: '',
      loginShow: false,
      list_comment: [],
      curComment: {},
      curCommentIN:{},
      comment_reply: '',
      list_comment_reset: 0,
      shareShow: false, //分享弹窗
      scrollClass: false,
      scrollClass2: false,
      isCommentScroll: 1,
      swiper_recommendationData: {
        loop: true,//是否循环
        slidesPerView: 1.1,//一排显示几个
        spaceBetween: 16, //间隔
      },
      swiper_discount_product:{
        autoplay: true,
        loop: false,//是否循环
        slidesPerView: 1,//一排显示几个
        pagination: {// 分页器
          el: '.swiper_discount_pagination',
          clickable: true //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
        },
      },
      isDiscountSwiperRun: true,
      isShare: false,
      shareData:{
        title: '',
        product_model_name: '',
        id: ''
      }

    }
  },
  components: { Swiper, SwiperSlide, ProductItem, SharePc, ShareDialog},
  computed: {
    isDetailProductExit(){
      return this.detail.products && this.detail.products.length > 0
    },
    ...mapGetters(['userInfo', 'curSite', 'isPhone']),
    currency () {
      return function(site, money) {
        let currency = '$' +money
        if(site == 'US'){
          currency = ' US$ ' +money
        } else if (site == 'AU') {
          currency = '$ ' +money
        } else if (site == 'CA') {
          currency = 'CDN$ ' + money
        } else if (site == 'DE') {
          currency =  this.formatMoney(money)  + ' €' 
        }else if (site == 'ES') {
          currency = this.formatMoney(money)  + ' €' 
        }else if (site == 'FR') {
          currency =  this.formatMoney(money)  + ' €' 
        }else if (site == 'IT') {
          currency =  this.formatMoney(money)  + ' €' 
        }else if (site == 'JP') {
          currency = '￥ ' + this.formatMoneyJP(money) 
        }else if (site == 'UK') {
          currency = '£ ' + money 
        }
        return currency
      }
     
    },
    iconLink () {
      let title = this.detail.title
      let location = window.location.href
      let array =  [
        {icon:'icon-Facebook1_normal', iconHover: 'icon-Facebook1_hover', word:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u='+location+ '&quote=' + title},
        // {icon:'icon-Instagram_normal_2', iconHover: 'icon-Instagram_hover_2',url:''},
        {icon:'icon-Twitter1_normal', iconHover: 'icon-Twitter1_hover', word:'Share on Twitter', url:'https://twitter.com/intent/tweet?text=' +title },
        {icon:'icon-Message1_normal', iconHover: 'icon-Message1_hover', word:'Share on Email', url:'mailto:?subject='+title+ '&body=' + location},
        {icon:'icon-Link1_normal', iconHover: 'icon-Link1_hover', word:'Copy Link to Clipboard', url:'copy'},
        {icon:'icon-Top1_normal', iconHover: 'icon-Top1_hover', word:'', url:''}
      ] 
      return array
    }
  },
  created () {
   if(this.curSite.id) {
    this.getDetails()
   }
  },
  watch : {
    curSite:  function() {
      if(this.curSite.id) {
        this.getDetails()
      }
    },
    $route: function() {
      if(this.curSite.id) {
        this.getDetails()
      }
    },
    commentWord: function() {
      if(this.commentWord.length > 0) {
        this.curComment = {}
        this.curCommentIN = {}
      }
    }
  },
  mounted () {
  
  },
  destroyed () {
    window.removeEventListener("scroll", this.debounce(this.windowScroll,100));//销毁滚动事件

  },
  methods: {
     isShareDialogShow (){ // 分享弹窗
      this.isShare = !this.isShare
    },
    stopSwiperStopAutoplay(name){ // 停止模块自动播放
      this.$refs[name].$swiper.autoplay.stop()
      if(name == 'moduleDiscount'){
        this.isDiscountSwiperRun = false
      } else if(name == 'swiperBanner'){
        this.isBannerSwiperRun = false
      } 
    },
    startSwiperStopAutoplay(name) { // 启动模块自动播放
      this.$refs[name].$swiper.autoplay.start()
      if(name == 'moduleDiscount'){
        this.isDiscountSwiperRun = true
      } else if(name == 'swiperBanner'){
        this.isBannerSwiperRun = true
      } 
    },
  

     prevImage (item) { // 产品里的图片切换
      let lenColor = item.color.length -1
      if(item.curIndex  > 0){
        item.curIndex = item.curIndex-1
      } else {
        item.curIndex = lenColor
      }
      
      this.changeColor(item, item.color[item.curIndex])

    },
    nextImage (item){// 产品里的图片切换
       let lenColor = item.color.length -1
      if(item.curIndex  < lenColor){
        item.curIndex = item.curIndex +1
      } else {
        item.curIndex = 0
      }
      this.changeColor(item, item.color[item.curIndex])
    },
    colorToSize (item, color){
      let data = item.data
      let m =  data.filter(d=>{
        return d.specification_name == item.curSpec.specification_name  && d.color == color
      })
      return m.length > 0
    },
    sizeToColor (item, size) {
      let data = item.data
      let m =  data.filter(d=>{
        return d.color == item.curSpec.color  && d.specification_name == size
      })
      return m.length > 0
    },
    changeColor (item, color) {
      let isExit = false
      let specData = item.data
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].color == color){
          if (item.curSpec.specification_name == specData[i].specification_name) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }
      if (!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].color == color){
            item.curSpec = specData[i];
            break;
          }
        }
      }
    },
    changeSpec (item, size){
      let specData = item.data
      let isExit =  false
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].specification_name == size){
          if (item.curSpec.color == specData[i].color) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }

      if(!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].specification_name == size){
            item.curSpec = specData[i];
             break;
          }
        }
      }
    },
    debounce(fn, delay) {
      let time = false //第一次进来time为false，走else
      return function(){
        if (time) {
          clearTimeout(time) //滚动条在不断的滚动，我们不断的清除定时器（重新初始化定时器，在重新设置定时器）
          time = setTimeout(fn, delay) //又重新设置定时器，
        } else {
          time = setTimeout(fn, delay) //进来第一次先进入这里，然后time被赋值 != false,如果滚动条在继续滚动，接着马上进入time == true中
        }
      }
    },
    windowScroll() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
      let recommendation_article = document.getElementById("recommendation_article")  // 推荐文章
      let  detail_discount =  document.getElementById("promotion") // 折扣商品
      let youLike =  document.getElementById("youLike")  // 猜你喜欢
      let detail_content = document.getElementsByClassName("detail_content")[0] //文章内容
      let articleImage =  document.getElementById("detail_article").getElementsByClassName("detail_comment")[0]
      if(this.isPhone){ // 手机端 
        if(detail_discount) { // 有折扣商品
          if(scrollTop < youLike.offsetTop + youLike.clientHeight - 44 - 44){
            this.curIs = 1
          } else if (scrollTop < (detail_discount.offsetTop + detail_discount.clientHeight - 44 - 44)){
            this.curIs = 2
          } else{
            this.curIs = 3
          }
        } else { // 没有折扣商品
          if(scrollTop < recommendation_article.offsetTop){
            this.curIs = 1
          } else{
            this.curIs = 3
          }
        }
      } else { // pc端
        let discount = detail_discount.offsetTop + detail_discount.clientHeight + articleImage.offsetTop - 32 - 56 - 80
        let detail_contentH = detail_content.offsetTop + detail_content.clientHeight + articleImage.offsetTop - 32 - 56 - 80
        
        if(scrollTop >= discount)  {
          this.curIs = 3
        }else  if(scrollTop < discount && scrollTop > detail_contentH){
          this.curIs = 2
        } else  {
          this.curIs = 1
        }
      }
      let detail_comment  =document.getElementsByClassName("detail_comment")[0].offsetTop
      if(scrollTop > (this.isPhone ? 44: 56) && scrollTop <= detail_comment) {
        this.scrollClass2 = true
      } else {
        this.scrollClass2 = false
      }
      if (scrollTop <= detail_comment) {
         this.scrollClass = false
      } else {
        this.scrollClass = true
      } 
   
    },

    scrollToModule (index, target) { // 固定栏点击滚动到指定模块
      this.curIs = index
      let top = document.getElementById(target).offsetTop
      if(!this.isPhone){
        let articleImage =  document.getElementById("detail_article").getElementsByClassName("detail_comment")[0]
        top += articleImage.offsetTop - 32
      } else {
        top +=12
      }
      let navbar = document.getElementsByClassName('navbar')[0].clientHeight
      let extendData = document.getElementsByClassName('article_detail')[0].clientHeight
      let height = top - navbar - extendData
      window.scrollTo({
        top: height ,
        left: 0,
        behavior: 'smooth'
      });
    },

    // 人名币转欧元的显示
    formatMoney (money) {
      return money.replace('.', ',')
    },
    // 人名币转日元的显示
    formatMoneyJP (money) {
      return parseMoney(money, 2, '.', ',')
    },
    // 复制优惠码
    copyPromotionCode (code) {
      let that = this
      this.$copyText(code).then(function () {
        that.$message.success('Link Copied')
      }, function () {
        that.$message.success('Link not copy')
      })
    },
    goToComment () {
      let top = document.getElementById('comment').getBoundingClientRect().top 
      let navbar = document.getElementsByClassName('navbar')[0].clientHeight
      let extendData = document.getElementsByClassName('article_detail')[0].clientHeight
      // console.log(top, navbar, extendData,  document.getElementById('comment').offsetTop)
      let scrollTop = top - navbar - extendData - 32
      if (this.isCommentScroll == 1) {
        scrollTop = scrollTop - 64
      }
       window.scrollTo({
        top: scrollTop,
        left: 0,
        behavior: 'smooth'
      });
      this.curIs = 2
      this.isCommentScroll++
    },
    closeShareDialog () {
      this.shareShow =!this.shareShow
    },
    // 点赞
    giveLike() {
       let params = {
        article_id:  this.detail.id
      }
      give_like(params).then(res=>{
        if(res.state == 1) {
         
          if( this.detail.is_like == 0){
            this.$set(this.detail, 'is_like', 1)
             this.detail.thumb_up_num += 1
            this.$message.success('点赞成功')
          } else {
            this.$set(this.detail, 'is_like', 0)
            this.detail.thumb_up_num -= 1
            this.$message.success('取消点赞成功')
          }
         
        }
      })
    },
    // 获取评论下的评论回复
    replyCommentList(item, index) {
      let params = {
        article_comment_id: item.id,
        offset: item.reply.length 
      }
      comment_reply_list(params).then(res=>{
        let list = res.data.data
        for(let i = 0; i < list.length; i++){
          list[i].comment_reply = ''
          list[i].time =   list[i].local_time.split(' ')[0]
        }
        let array = item.reply.concat(list)
        this.curCommentIN = {}
        this.$set(this.list_comment[index], 'reply' , array )
        this.$set(this.list_comment[index], 'reply_residue' , res.data.residue )
       
      })
    },
    replyComment (item, index, comment) {
      let reply_comment_id = 0
      if( comment) {
        reply_comment_id = comment.id 
      }
      let params = {
        article_id: this.detail.id,
        article_comment_id: item.id,
        nickname: this.userInfo.nickname || this.userInfo.truename,
        country: this.curSite.name_en,
        local_time:  timeFormat(new Date()),
        content: item.comment_reply,
        reply_nickname: item.nickname,
        reply_comment_id: reply_comment_id
      }
      if(comment) {
        params.content = comment.comment_reply
        params.reply_nickname = comment.nickname
      }
      comment_reply(params).then(res => {
        if(res.state == 1) {
          // 清空填写位置的数据
          if(comment) {
            comment.comment_reply = ''
          } else {
            item.comment_reply = ''
          }
          this.curCommentIN = {}
          this.curComment = {}
          // 添加数据
          let array = item.reply
          if(array.length < 2){
            let data = res.data
            data.comment_reply = ''
            // data.time =  data.local_time.split(' ')[0]
            array.push(data)
            this.$set(this.list_comment[index], 'reply' , array )
          }else {
            // 修改剩余数量
            this.$set(this.list_comment[index], 'reply_residue' , item.reply_residue + 1 )
          }
          this.detail.comment_num += 1
          this.$message.success('添加成功')
        }
      })
    },
    // 外层 评论的item
    setCommentItem (item) {
      if(this.userInfo.email){
        if(this.curComment.id == item.id){
          this.curComment = {}
        } else {
          this.curComment = item
        } 
        this.curCommentIN = {}
      } else {
        this.closeLoginDialog()
      }

    },
    // 内层 评论的item
    setCommentItemIN (item) {
      if (this.userInfo.email) {
        if(this.curCommentIN.id == item.id){
          this.curCommentIN = {}
        } else {
          this.curCommentIN = item
        } 
        this.curComment = {}
      } else {
        this.closeLoginDialog()
      }
     
    },
    // 获取评论列表
    getCommentList (offset) {
      let offsetm = 0
      if(offset !== 0) {
        offsetm =  (this.list_comment.length > 0 ? this.list_comment.length : 0)
      }
      let params = {
        article_id:  this.detail.id,
        offset: offsetm 
      }
      comment_list(params).then(res=>{
        if(res.state == 1) {
          let data = res.data 
          let list = data.data
          if (list && list.length > 0){
            for(let i = 0; i < list.length; i++){
              // list[i].time = list[i].local_time.split(' ')[0]
              let list_reply = list[i].reply
              if (list_reply.length > 0){
                for(let j = 0; j < list_reply.length; j++){
                  // list_reply[j].time = list_reply[j].local_time.split(' ')[0]
                  list_reply[j].comment_reply = ''
                }
                list[i].reply = list_reply 
              }
              list[i].comment_reply = ''
            }
            this.list_comment_reset = data.residue
            if(params.offset  > 0 ){
              this.list_comment = this.list_comment.concat(list)
            } else {
              this.list_comment = list
            }
          } 
        }
        // 监听滚动事件
        // window.addEventListener("scroll", this.debounce(this.windowScroll,100));//监听页面滚动 
      })
    },
    closeLoginDialog () {
      this.loginShow = !this.loginShow
    },
    // 注册界面
    goToRegister () {
      this.$router.push({path: '/signUp'})
    },
    // 添加评论
    commentArticle () {
      if(this.userInfo.email ){ 
        if(this.commentWord.length > 0) {
          let params = {
            article_id: this.detail.id,
            article_title: this.detail.title,
            nickname: this.userInfo.nickname || this.userInfo.truename,
            country: this.curSite.name_en,
            local_time:  timeFormat(new Date()),
            content: this.commentWord
          }
          article_comment(params).then(res => {
            if(res.state == 1){
              this.$message.success('评论成功')
              this.commentWord = ''
              this.detail.comment_num += 1
              if(this.list_comment_reset == 0) {
                this.getCommentList(0)
              }

            }
          })
        
        }
      
      } else {
        this.closeLoginDialog() 
      }
    },
    // 推荐文章
    goToDetails(item) {
      this.$router.push({path: '/article/' + item.link})
    },
    // 产品
    goToDetail (item){
      this.$router.push({path: '/product/' + item.set_link})
    },
    //优惠产品直接打开
    goToProductDetails (item) {
      articleDiscountClickFunc(this.detail.title, this.detail.id, item.product_title)
      window.open(item.link, '_blank')
    },
    // label跳转
    goToList (item) {
      this.$router.push({path: '/community/' + this.detail.first_type + '?tag=' + item})
    },
    // 优惠产品
    getDiscount() {
      let params = {
        article_id:  this.detail.id
      }
      discount(params).then(res => {
        if(res.state == 1) {
          let data = res.data
          for(let i = 0; i < data.length; i++){
            // 折扣计算
            let original_price = parseFloat(data[i].original_price) || 0
            let discount = parseFloat(data[i].discount) || 0
            data[i].discount_price = (original_price - original_price*discount / 100).toFixed(2)
            // 时间格式转换
            let start_time = new Date(data[i].start_time)
            let start_time_format = (start_time.getMonth() + 1) + '/' + start_time.getDate()
            let end_time = new Date(data[i].end_time)
            let end_time_hour = end_time.getHours() 
            let end_time_format = (end_time.getMonth() + 1) + '/' + end_time.getDate() + ' '+ end_time_hour +':'+
            end_time.getMinutes()+ ' ' + (end_time_hour > 12 ? 'PM' : 'AM') 


            data[i].timeFormat =  start_time_format + '-' + end_time_format
          }
          this.discount = data
        }
        // 获取评论接口
        this.getCommentList()
      })
    },
    giveLikeJudge () {
      if(this.userInfo.email) {
        this.giveLike()
      }else {
        this.closeLoginDialog()
      }
    },
    getYouLike () {
      let params = {
        first_type:  this.detail.first_type,
        article_id:  this.detail.id
      }
      youLike(params).then(res => {
        if(res.state == 1) {
          this.list_youLike = res.data
        }
      })
    },
    getDetails() {
      let params = {
        link:  this.$route.params.id,
        site_id: this.curSite.id,
        site : this.curSite.site,
        local_time: timeFormat(new Date()).split(' ')[0],
      }
      detail(params).then(res=>{
        if(res.state == 1){
          let data = res.data
          // 左侧label内容
          let array = []
          if(data.first_type) {
            array.push(data.first_type)
          }
          let tag_type = data.tag_type
          let ele = tag_type.indexOf(',') > -1
          if(ele) {
            array =  tag_type.split(',')
          } else if(tag_type){
            array.push(tag_type)
          }
          let list = data.products
          for(let i = 0; i < list.length; i++){
            let data  = list[i].data
            if (list[i].star_comment == ''){
              list[i].star_comment = 0
            }
            if(list[i].tag_type == 1){ // 标签类型转换
              list[i].tag_type = 'NEW'
            } else if(list[i].tag_type == 2){
              list[i].tag_type = 'HOT'
            } else {
              list[i].tag_type = ''
            }
            list[i].curIndex = 0
            if(data.length > 0){
              list[i].curSpec = list[i].data[0]
            } else {
              list[i].curSpec = {}
            }
          }
          // data.time = data.create_time.split(' ')[0]
          data.label = array
          this.detail = data
          this.shareData.title = data.title
          this.shareData.product_model_name = data.product_model_name
          this.shareData.id = data.id
          // 调用界面其他接口
          this.getYouLike()
          this.getDiscount()
         
        }
       
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/explore/details.scss';
</style>